<template>
  <div style="padding:20px">
    <el-button type="primary" @click="visible = true">添加学生</el-button>
    <el-button type="primary" @click="begin" :loading="isLoginAll">开始统计</el-button>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名" width="150">
         <template #default="scope">
          {{scope.row.name}}
            <el-button type="danger" :icon="Delete" circle @click="del(scope.row)" size="small" title="删除学生"/>
            <el-button type="primary" :loading="scope.row.isLoading" @click="refresh(scope.row)" title="刷新学生" :icon="Refresh" circle size="small"/>
        </template>
      </el-table-column>
      <el-table-column label="项目名称" width="150">
        <template #default="scope">
        <el-popover
          placement="top-start"
          title="地址"
          :width="200"
          trigger="hover"
          :content="'https://gitee.com/' + scope.row.giteeName + '/' + scope.row.projectGiteeName"
        >
          <template #reference>
            <el-tag>{{scope.row.projectName}}</el-tag>
          </template>
        </el-popover>

        </template>
      </el-table-column>
      <el-table-column label="最新统计时间" width="160">
        <template #default="scope">
         {{format(scope.row.latestVisitTimeStamp)}}
        </template>
      </el-table-column>
      <el-table-column v-for="col in columns" :key="col.prop" :prop="col.prop" :label="col.label"/>
    </el-table>
    <StuDialog v-model="visible"/>
  </div>
</template>

<script lang="ts" setup>
import {
  Refresh,
  Delete
} from '@element-plus/icons-vue'
import { getDayListAgo, format } from '../utils/day.js'
import { getCommits } from '../services'
import { computed, ref } from 'vue'
import useStoreStu from '~/store/stu'
import { ElMessage } from 'element-plus'
import StuDialog from './components/StuDialog.vue'
const storeStu = useStoreStu()
// const data = ref([{"name":"凡友福","giteeName":"thelastsheep","projectName":"小兔仙","projectGiteeName":"vue3-xiaotuxian","status":true,"list":{"2022-03-11":[{"date":"2022-03-11","time":"15:54:30","message":"开发：支付回跳页面\n"}],"2022-03-10":[{"date":"2022-03-10","time":"12:00:59","message":"开发：倒计时应用格式化\n"},{"date":"2022-03-10","time":"11:38:47","message":"开发：封装倒计时方法\n"},{"date":"2022-03-10","time":"11:36:14","message":"开发：渲染支付页数据\n"},{"date":"2022-03-10","time":"11:33:06","message":"开发：封装支付页组件\n"},{"date":"2022-03-10","time":"11:28:39","message":"开发：订单提交\n"}],"2022-03-09":[{"date":"2022-03-09","time":"21:48:00","message":"开发：订单切换地址\n"},{"date":"2022-03-09","time":"21:33:03","message":"开发：封装地址组件\n"},{"date":"2022-03-09","time":"21:12:16","message":"开发：订单获取数据渲染\n"},{"date":"2022-03-09","time":"21:05:23","message":"开发：封装订单页\n"},{"date":"2022-03-09","time":"21:01:26","message":"开发：下单结算检验跳转，优化检验token和退出清空数据\n"},{"date":"2022-03-09","time":"20:41:49","message":"优化：使用vueuse中的防抖函数\n"},{"date":"2022-03-09","time":"20:38:43","message":"开发：购物车删除商品功能\n"},{"date":"2022-03-09","time":"20:35:36","message":"开发：修改购物车商品的数量\n"},{"date":"2022-03-09","time":"19:11:53","message":"开发：根据单选回显全选\n"},{"date":"2022-03-09","time":"18:58:05","message":"开发：完成购物车全选功能\n"},{"date":"2022-03-09","time":"16:30:15","message":"优化：更新数量组件名\n"},{"date":"2022-03-09","time":"10:35:55","message":"优化：修复部分bug，并补充购物车组件样式\n"}],"2022-03-07":[{"date":"2022-03-07","time":"21:49:01","message":"开发：单选功能\n"},{"date":"2022-03-07","time":"19:26:26","message":"开发：列表数据展示\n"}]},"isLoading":false},{"name":"error","giteeName":"thelastsheep","projectName":"小兔仙","projectGiteeName":"vue3-xiaotuxian","status":true,"list":{"2022-03-11":[{"date":"2022-03-11","time":"15:54:30","message":"开发：支付回跳页面\n"}],"2022-03-10":[{"date":"2022-03-10","time":"12:00:59","message":"开发：倒计时应用格式化\n"},{"date":"2022-03-10","time":"11:38:47","message":"开发：封装倒计时方法\n"},{"date":"2022-03-10","time":"11:36:14","message":"开发：渲染支付页数据\n"},{"date":"2022-03-10","time":"11:33:06","message":"开发：封装支付页组件\n"},{"date":"2022-03-10","time":"11:28:39","message":"开发：订单提交\n"}],"2022-03-09":[{"date":"2022-03-09","time":"21:48:00","message":"开发：订单切换地址\n"},{"date":"2022-03-09","time":"21:33:03","message":"开发：封装地址组件\n"},{"date":"2022-03-09","time":"21:12:16","message":"开发：订单获取数据渲染\n"},{"date":"2022-03-09","time":"21:05:23","message":"开发：封装订单页\n"},{"date":"2022-03-09","time":"21:01:26","message":"开发：下单结算检验跳转，优化检验token和退出清空数据\n"},{"date":"2022-03-09","time":"20:41:49","message":"优化：使用vueuse中的防抖函数\n"},{"date":"2022-03-09","time":"20:38:43","message":"开发：购物车删除商品功能\n"},{"date":"2022-03-09","time":"20:35:36","message":"开发：修改购物车商品的数量\n"},{"date":"2022-03-09","time":"19:11:53","message":"开发：根据单选回显全选\n"},{"date":"2022-03-09","time":"18:58:05","message":"开发：完成购物车全选功能\n"},{"date":"2022-03-09","time":"16:30:15","message":"优化：更新数量组件名\n"},{"date":"2022-03-09","time":"10:35:55","message":"优化：修复部分bug，并补充购物车组件样式\n"}],"2022-03-07":[{"date":"2022-03-07","time":"21:49:01","message":"开发：单选功能\n"},{"date":"2022-03-07","time":"19:26:26","message":"开发：列表数据展示\n"}]},"isLoading":false},{"name":"小花","giteeName":"jason-51world","projectName":"小兔仙","projectGiteeName":"rabbit-vue3.0","status":true,"list":{"2022-03-14":[{"date":"2022-03-14","time":"17:09:13","message":"feature:Login=>登录消息提示组件\n"},{"date":"2022-03-14","time":"14:04:34","message":"feature:登录:退出后再登录,恢复记忆页面\n"}],"2022-03-13":[{"date":"2022-03-13","time":"01:05:56","message":"feature:logout(退出后登录无法恢复访问原地址bug待修复)\n"}],"2022-03-12":[{"date":"2022-03-12","time":"02:28:05","message":"feature:Login实现\n"},{"date":"2022-03-12","time":"01:26:48","message":"feature:Login=>表单验证实现\n"},{"date":"2022-03-12","time":"00:26:05","message":"feature:Login基础布局\n"},{"date":"2022-03-12","time":"00:09:58","message":"商品详情:热榜区域+props适配接口参数\n"}],"2022-03-11":[{"date":"2022-03-11","time":"23:28:50","message":"商品详情:详情展示区\n"},{"date":"2022-03-11","time":"23:09:41","message":"商品详情:加入购物车按钮\n"},{"date":"2022-03-11","time":"23:00:47","message":"商品详情:数量组件=>子组件有自己的初始值\n"},{"date":"2022-03-11","time":"22:44:24","message":"商品详情:数量组件=>子组件没有自己状态\n"},{"date":"2022-03-11","time":"20:16:58","message":"商品详情:商品规格实现\n"},{"date":"2022-03-11","time":"20:02:35","message":"商品详情:商品销售信息debug(品牌名称)\n"},{"date":"2022-03-11","time":"20:00:37","message":"商品详情:商品销售统计信息组件\n"},{"date":"2022-03-11","time":"19:28:55","message":"商品详情:商品信息组件\n"},{"date":"2022-03-11","time":"19:13:00","message":"商品详情:区域1 图片展示\n"},{"date":"2022-03-11","time":"18:29:24","message":"商品详情:结构+路由跳转\n"},{"date":"2022-03-11","time":"16:58:23","message":"首页:一级分类:路由缓存debug方案2\n"},{"date":"2022-03-11","time":"16:46:38","message":"首页:一级分类:路由缓存修复=>watch\n"},{"date":"2022-03-11","time":"11:32:48","message":"首页:一级分类=>分类关联商品\n"}]},"isLoading":false}])

const dayList = getDayListAgo(10)
const dateList = dayList.map(it => ({ prop: it, label: it.substr(5) }))
const isLoginAll = ref(false)
const columns = [
  ...dateList
]
const begin = () => {
  const stus = storeStu.stus
  // set isLoading
  storeStu.setLoad(true)
  isLoginAll.value = true
  Promise.allSettled(stus.map(stu => getCommits(stu.giteeName, stu.projectGiteeName))).then(res => {
    isLoginAll.value = false
    const errorInfo = []
    stus.forEach((stu, idx) => {
      const t = res[idx]
      stu.isLoading = false
      stu.status = t.status === 'fulfilled'
      if ('value' in t) {
        const list = t.value.data
        storeStu.update(stu, list)

        stu.latestVisitTimeStamp = Date.now()
      } else {
        errorInfo.push(stu.name + '更新失败:' + t.reason)
      }
    })
    if (errorInfo.length) {
      ElMessage.error(errorInfo.length + '人 更新失败!' + errorInfo.join(' '))
    }
    // console.log()
  })
}
const tableData = computed(() => {
  console.log('.........')
  // 每个学生去找提交记录
  return storeStu.stus.map(stu => {
    const t = {
      name: stu.name,
      projectGiteeName: stu.projectGiteeName,
      giteeName: stu.giteeName,
      projectName: stu.projectName,
      isLoading: stu.isLoading,
      latestVisitTimeStamp: stu.latestVisitTimeStamp
    }
    const com = stu.list
    if (com) {
      dayList.forEach(day => {
        t[day] = com[day] ? com[day].length : 0
      })
    }
    return t
  })
})
const del = async (d) => {
  await storeStu.del(d.name)
  ElMessage({
    message: '删除成功.',
    type: 'success'
  })
}

const refresh = async (d) => {
  console.log(storeStu, d)
  try {
    await storeStu.refresh(d.name)
    ElMessage({
      message: '更新成功.',
      type: 'success'
    })
  } catch (err) {
    console.log(err)
    ElMessage({
      message: err || '更新失败.',
      type: 'error'
    })
  }
}
// 添加弹框
const visible = ref(false)

</script>
